<template>
  <div>
        <el-row id="top" :gutter="15" class="base-nav">
            <el-col :span="9">
                <el-card class="mini_card">
                    <i class="el-icon-s-flag" style="font-size: 26px;color:#D32F2F"></i>
                    基地：<i style="font-weight:900;">{{BaseInfo.name}}</i>
                    <el-button type="text" @click="showBaseChoice()">切换</el-button>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    <i class="el-icon-s-home" style="font-size:26px;color:#3F51B5"></i>
                    鸽棚数量：<i style="font-size: 26px;font-weight:900;color:#03A9F4">{{Dovecote_count}}</i> 座
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    <i class="el-icon-s-custom" style="font-size:26px;color:#03A9F4"></i>
                    饲养员：<i style="font-size: 26px;font-weight:900;color:#FF9800">{{breeder_count}}</i> 位
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="mini_card">
                    <i class="el-icon-star-on" style="font-size:26px;color:#FFEB3B"></i>
                    绩效冠军：<i style="font-size: 26px;font-weight:900;color:#8BC34A">{{Dovecote_winer}}</i>
                </el-card>
            </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: "baseNav",
  meta: {
    title: "基地导航",
  },
  computed: {
     ...mapState({
          BaseInfo: state => state.Usersetting.BaseInfo,
      }),
    },
  methods: {
    ...mapMutations(['showBaseChoice']),
  },
  data() {
    return {
      // 顶部
      Dovecote_count: '23',
      breeder_count: '23',
      Dovecote_winer: 'A26',
    }
  },
}
</script>

<style lang="scss" scoped>
.base-nav{
  margin-bottom: 10px;
}
</style>
